<script>
  import {Mesh,DirectionalLight,
    DoubleSide,
    MeshPhongMaterial,
    Vector3,
    Float32BufferAttribute,
    Color,
    Points,
    BufferGeometry,
    PointsMaterial,
  } from "three"
  import { OrbitControls,Object3DInstance, useFrame,T,MeshInstance,LightInstance } from "@threlte/core"

  const geometry = new BufferGeometry()
  const material = new MeshPhongMaterial({
    color: 0xaaaaaa,
    specular: 0xffffff,
    shininess: 250,
    side: DoubleSide,
    vertexColors: true,
    transparent: true,
  })
  const points = new Mesh(geometry, material)
  let rotation = 0
  useFrame(() => {
    rotation += 0.001
  })
  const triangles = 30000
  const positions = []
  const normals = []
  const colors = []

  const color_a = new Color()

  const n = 800,
    n2 = n / 2 // triangles spread in the cube
  const d = 12,
    d2 = d / 2 // individual triangle size

  const pA = new Vector3()
  const pB = new Vector3()
  const pC = new Vector3()

  const cb = new Vector3()
  const ab = new Vector3()

  for (let i = 0; i < triangles; i++) {
    // positions

    const x = Math.random() * n - n2
    const y = Math.random() * n - n2
    const z = Math.random() * n - n2

    const ax = x + Math.random() * d - d2
    const ay = y + Math.random() * d - d2
    const az = z + Math.random() * d - d2

    const bx = x + Math.random() * d - d2
    const by = y + Math.random() * d - d2
    const bz = z + Math.random() * d - d2

    const cx = x + Math.random() * d - d2
    const cy = y + Math.random() * d - d2
    const cz = z + Math.random() * d - d2

    positions.push(ax, ay, az)
    positions.push(bx, by, bz)
    positions.push(cx, cy, cz)

    // flat face normals

    pA.set(ax, ay, az)
    pB.set(bx, by, bz)
    pC.set(cx, cy, cz)

    cb.subVectors(pC, pB)
    ab.subVectors(pA, pB)
    cb.cross(ab)

    cb.normalize()

    const nx = cb.x
    const ny = cb.y
    const nz = cb.z

    normals.push(nx, ny, nz)
    normals.push(nx, ny, nz)
    normals.push(nx, ny, nz)

    // colors

    const vx = x / n + 0.5
    const vy = y / n + 0.5
    const vz = z / n + 0.5

    color_a.setRGB(vx, vy, vz)

    const alpha = Math.random()

    colors.push(color_a.r, color_a.g, color_a.b, alpha)
    colors.push(color_a.r, color_a.g, color_a.b, alpha)
    colors.push(color_a.r, color_a.g, color_a.b, alpha)
  }

  geometry.setAttribute(
    "position",
    new Float32BufferAttribute(positions, 3)
  )
  geometry.setAttribute(
    "normal",
    new Float32BufferAttribute(normals, 3)
  )
  geometry.setAttribute(
    "color",
    new Float32BufferAttribute(colors, 4)
  )

  geometry.computeBoundingSphere()
  const light1 = new DirectionalLight( 0xffffff, 0.5 );
const light2 = new DirectionalLight( 0xffffff, 1.5 );
</script>
<T.PerspectiveCamera makeDefault position={[30, 1000, 30]} fov={75}>
  <OrbitControls

    enableZoom={false}
    target={{ y: 0.5 }}
  />
</T.PerspectiveCamera>
<!-- <T.AmbientLight intensity={1.2} /> -->
<!-- <Object3DInstance object={points} rotation={rotation} /> -->
<MeshInstance mesh={points} rotation={{ x: rotation,y:rotation,z:rotation }} />
<LightInstance light={light1}  position={{ x: 1, y: 1,z:1 }} />
<LightInstance light={light2}  position={{ x: 0, y: -1,z:0 }} />